<template>
	<el-table
		border
		stripe
		max-height="500"
		empty-text="无结果"
		style="width: 100%"
		:data="filterTableData"
		@cell-click="cellClick"
	>
		<el-table-column prop="title" label="标题">
			<template #header>
				<el-input
					v-model="search.title"
					:placeholder="placeholder.title"
					class="search-input"
					clearable
				/>
			</template>
		</el-table-column>
		<el-table-column prop="artist" label="艺术家">
			<template #header v-if="disableSearch !== 'artist'">
				<el-input
					v-model="search.artist"
					:placeholder="placeholder.artist"
					class="search-input"
					clearable
				/>
			</template>
		</el-table-column>
		<el-table-column prop="album" label="专辑">
			<template #header v-if="disableSearch !== 'album'">
				<el-input
					v-model="search.album"
					:placeholder="placeholder.album"
					class="search-input"
					clearable
				/>
			</template>
		</el-table-column>

		<el-table-column prop="tags" label="标签" min-width="100">
			<template #default="scope">
				<tags-controller
					:showDelete="true"
					:tags="scope.row.tags"
					@change="(msg) => changeTags(scope.row.key, msg)"
					@delete="deleteItem(scope.row.key)"
				/>
			</template>
		</el-table-column>
	</el-table>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { useConfig } from "@/store/config";
import { useWindow } from "@/utils/useWindow";
import { defineProps, reactive, computed } from "vue";
import tagsController from "@/components/common/tags-controller.vue";
import { deleteItem, IMP3Data } from "@/utils/useRequest";
import { changeTagsHandler, IChangeTagMsg } from "@/utils/tag";
import { smartCompareStr } from "@/utils/common";

interface ITableCellInfo {
	key: string;
	type: string;
	order: string;
	property: keyof IMP3Data;
}

const props = defineProps({
	tableData: {
		type: Array,
		default: () => [],
	},
	disableSearch: {
		type: String,
		default: "",
	},
});

const router = useRouter();

const search = reactive({
	title: "",
	album: "",
	artist: "",
});

const { width } = useWindow();
const { mp3ByID } = useConfig();

const placeholder = computed(() =>
	width.value > 476
		? {
				title: "检索标题",
				album: "检索专辑",
				artist: "检索艺术家",
		  }
		: {
				title: "标题",
				album: "专辑",
				artist: "艺术家",
		  }
);

const filterTableData = computed(() => {
	return (
		props.tableData.filter(
			(item: any) => item.mediatype === "AUDIO"
		) as IMP3Data[]
	)
		.filter(({ title }) => title.includes(search.title))
		.filter(({ album }) => album.includes(search.album))
		.filter(({ artist }) => artist.includes(search.artist));
});

function cellClick(data: IMP3Data, info: ITableCellInfo) {
	const key = info.property;

	if (key === "title") {
		const query = mp3ByID
			? { key: data.key }
			: {
					title: data.title,
					album: data.album,
					artist: data.artist,
			  };
		router.push({ query });
	} else {
		router.push({
			query: { [key]: data[key] },
		});
	}
}

function changeTags(key: string, msg: IChangeTagMsg) {
	changeTagsHandler(msg, key);
}
</script>

<style lang="less">
.search-input {
	width: 100% !important;
	input {
		width: 100% !important;
	}
}
</style>
